<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-06 16:32:01
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-04-06 17:26:43
 * @Description:
 *
-->

<template>
  <div class="custom-title">
    <div class="left"></div>
    <div class="middle">
      <img class="img" src="@/assets/imgs/situation/img_title_middle.png" />
      <div class="text">{{ appTitle }}</div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
import { DEFAULT_APP_TITLE } from '@/utils/constant'

export default {
  name: 'CustomTitle',
  props: {},
  data() {
    return {
      pmlTitle: DEFAULT_APP_TITLE
    }
  },
  computed: {
    appTitle() {
      const menuName = this.$store.state.app.menuName
      const key = 'App'
      if (Object.prototype.hasOwnProperty.call(menuName, key)) {
        return menuName[key].menuValue
      }
      return DEFAULT_APP_TITLE
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";

.custom-title {
  width: 100%;
  display: flex;
  justify-content: center;

  .left {
    width: 709px;
    height: 62px;
    background: url("~@/assets/imgs/situation/img_title_left.png") no-repeat;
    background-size: 100% 100%;
    transform: translateX(0.1px);
  }
  .middle {
    height: 62px;
    position: relative;

    .img {
      position: absolute;
      top: 0;
      height: 62px;
      width: 100%;
      object-fit: fill;
    }

    .text {
      position: relative;
      margin: 5px 12px 0;
      text-align: center;
      .textStyle(30px, 600, #fff);
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 39px;
      letter-spacing: 2px;
      background: linear-gradient(180deg, #e7f7ff 0%, #b4d6eb 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .right {
    width: 709px;
    height: 62px;
    background: url("~@/assets/imgs/situation/img_title_right.png") no-repeat;
    background-size: 100% 100%;
    transform: translateX(-0.1px);
  }
}
</style>
